<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>一个有温度的小流年</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="./assets/css/theme.css" rel="stylesheet">

    <link rel="shortcut icon" href="https://probberechts.github.io/hexo-theme-cactus/images/icons/favicon.ico">
    <link rel="icon" type="image/png" href="https://probberechts.github.io/hexo-theme-cactus/images/icons/favicon.ico" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="https://probberechts.github.io/hexo-theme-cactus/images/icons/favicon.ico">
      
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
      <div class="container">
        <a class="navbar-brand" href="./"><strong>Xiaoliunian</strong> UI Kit</a>
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse offcanvas-collapse" id="navbar_main">
          <ul class="navbar-nav ml-auto align-items-lg-center">
            <h6 class="dropdown-header font-weight-600 d-lg-none px-0">Menu</h6>
            <li class="nav-item active">
              <a class="nav-link" href="./index.html">Overview</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="./" id="navbar_main_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
              <div class="dropdown-menu" aria-labelledby="navbar_1_dropdown_1">
                <!--<a class="dropdown-item" href="./pages/homepage.html">Homepage</a>
                <a class="dropdown-item" href="./pages/about.html">About us</a>
                <a class="dropdown-item" href="./pages/sign-in.html">Sign in</a>
                <a class="dropdown-item" href="./pages/contact.html">Contact</a>-->
                <a class="dropdown-item" href="./">Homepage</a>
                <a class="dropdown-item" href="#">About us</a>
                <a class="dropdown-item" href="#">Sign in</a>
                <a class="dropdown-item" href="#">Contact</a>
              </div>
            </li>
            <!--<li class="nav-item">
              <a class="nav-link" href="./docs/introduction.html">Docs</a>
            </li>-->
            <!--<li class="nav-item">
              <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" target="_blank" class="nav-link d-lg-none">Download Free</a>
              <a href="https://github.com/webpixels/boomerang-ui-kit/archive/master.zip" target="_blank" class="btn btn-sm bg-white d-none d-lg-inline-flex">Download Free</a>
            </li>-->
            <div class="dropdown-divider d-lg-none my-4"></div>
            <!--<h6 class="dropdown-header font-weight-600 d-lg-none px-0">Social Media</h6>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://instagram.com/webpixelsofficial/" target="_blank"><i class="fab fa-instagram"></i><span class="ml-2 d-lg-none">Instagram</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://web.facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i><span class="ml-2 d-lg-none">Facebook</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i><span class="ml-2 d-lg-none">Dribbble</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link nav-link-icon" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i><span class="ml-2 d-lg-none">Github</span></a>
            </li>-->
          </ul>
        </div>
      </div>
    </nav>
    <main class="main">
      <section class="spotlight parallax bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('assets/images/backgrounds/img-1.jpg')">
        <span class="mask bg-primary alpha-7"></span>
        <div class="spotlight-holder py-lg pt-lg-xl">
          <div class="container d-flex align-items-center no-padding">
            <div class="col">
              <div class="row cols-xs-space align-items-center text-center text-md-left justify-content-center">
                <div class="col-7">
                  <div class="text-center mt-5">
                    <img src="assets/images/brand/icon.png" style="width: 200px;" class="img-fluid animated" data-animation-in="jackInTheBox" data-animation-delay="1000">
                    <h2 class="heading display-4 font-weight-400 text-white mt-5 animated" data-animation-in="fadeInUp" data-animation-delay="2000">
                      <span class="font-weight-700">A sentence for Everyone</span> Please read it
                    </h2>
                    <p class="lead text-white mt-3 lh-180 c-white animated" data-animation-in="fadeInUp" data-animation-delay="2500">
                        &nbsp;&nbsp;&nbsp;&nbsp;Be sure to be with people of the same frequency as you, with people who are better than you, and with people with positive energy. Because in this way, you will gradually become a beam of light, illuminating yourself and the people around you. <strong class="text-white">Thanks</strong>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slice slice-lg">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-10">
            
             

            
              
              <div class="row-wrapper">
            
                <div class="row color-palette cols-xs-space cols-sm-space cols-md-space">
                  <div class="col-4">
                  	<!--http://www.jpress.cn/product/60-->
                    <a href="#" data-toggle="tooltip" >                   
                        	<img class="card-img-top" src="http://oss4jpressio.oss-cn-beijing.aliyuncs.com/attachment/20220914/c246c1a994224c258652ef639e5df6d1.png" alt="">                     
                    </a>
                  </div>
                  <div class="col-4">
                    <a href="#" data-toggle="tooltip" >             
                       <img class="card-img-top" src="http://oss4jpressio.oss-cn-beijing.aliyuncs.com/attachment/20220914/7e7d4ef7cabc439e89428289ae3b05ac.jpg" alt="">                    
                    </a>
                  </div>
                  <div class="col-4">
                    <a href="#" data-toggle="tooltip" > 
                     <!--git 地址 https://gitee.com/fuyang_lipengjun/platform?_from=gitee_search-->
                        <img class="card-img-top" src="https://platform-wxmall.oss-cn-beijing.aliyuncs.com/gh_a7a467438863_344.jpg"/>
                    </a>
                  </div>
                </div>
              
                <div class="row color-palette cols-xs-space cols-sm-space cols-md-space">
                  <div class="col-4">
                    <a href="#" data-toggle="tooltip" >
                       <img class="card-img-top" src="http://oss4jpressio.oss-cn-beijing.aliyuncs.com/attachment/20220713/81dcb8f26a8549b1886db7749ebef304.jpg" alt="">           
                    </a>
                  </div>
                  <div class="col-4">
                    <a href="#" data-toggle="tooltip" >                                         	
                     <img class="card-img-top" src="http://oss4jpressio.oss-cn-beijing.aliyuncs.com/attachment/20220628/b1c461e387044b7aa30a4a315a7b9474.jpg" alt="">
                    </a>
                  </div>
                  <div class="col-4">
                    <a href="#" data-toggle="tooltip" > 
                      <img class="card-img-top" src="http://oss4jpressio.oss-cn-beijing.aliyuncs.com/attachment/20220531/e98c0eaa399b45d9b5928448cee97e03.jpg" alt="">    
                    </a>
                  </div>
                </div>

                
            
              </div>

            </div>
          </div>
        </div>
      </section>
      <section class="slice slice-lg bg-tertiary bg-cover bg-size--contain" style="background-image: url('assets/images/backgrounds/img-1.png'); background-position: center 10%;">
        <span class="mask bg-primary alpha-7"></span>
        <div class="container text-center">
          <div class="row cols-xs-space cols-sm-space cols-md-space">
            <div class="col-12">
              <h2 class="heading text-white h1 strong-600">
                Vision and Mission
              </h2>
              <div class="row justify-content-center mt-4">
                <div class="col-lg-8">
                  <p class="lead text-white">
                    The Xiaoliunian vision is to become the preferred portal for every enterprise,Enable every enterprise to have a secure, easy-to-use, and comfortable portal site,
                    To help enterprises achieve growth and reflect value.
                  </p>
                 
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="slice-lg">

        <div class="container">
        	
          <h2 class="heading h3 strong-600 text-center mb-5">
            What did you get from my product browsing
          </h2>
          

					<!--轮播-->
					
					
          <!---->
          
          <div class="row-wrapper">
            <div class="row cols-xs-space cols-sm-space cols-md-space">
              <div class="col-md-6">
                <div class="card bg-primary">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-th-large text-white"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading text-white h4">50 customized components</h3>
                        <p class="text-white mb-0">We took the most used Bootstrap components and add them a little Boomerang touch with modular elements that makes them reusable and easy to work with.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-tint"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading h4">Extended color palette</h3>
                        <p class="mb-0">Boomerang has extended the color palette that Bootstrap offers by default. Instead of two primary colors, you get now three. These can be easily customized using the included Sass files.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row cols-xs-space cols-sm-space cols-md-space">
              <div class="col-md-6">
                <div class="card bg-primary">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-code text-white"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading text-white h4">Five integrated plugins</h3>
                        <p class="text-white mb-0">Get even more functionality with the ready to use plugins we have integrated in this theme for you.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-font"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading h4">Font Awesome 5</h3>
                        <p class="mb-0">1000 Free icons + 1500 Pro icons make FontAwesome one of the most popular vector icons on the web.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row cols-xs-space cols-sm-space cols-md-space">
              <div class="col-md-6">
                <div class="card bg-primary">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-file-alt text-white"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading text-white h4">Five example pages</h3>
                        <p class="text-white mb-0">We took a step further and created a set of 5 pages that makes it the ideal point to start building websites of any kind.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card">
                  <div class="card-body py-5">
                    <div class="d-flex align-items-start">
                      <div class="icon icon-lg">
                        <i class="fas fa-question-circle"></i>
                      </div>
                      <div class="icon-text">
                        <h3 class="heading h4">Free support on Github</h3>
                        <p class="mb-0">You get a professional theme and a promise that we will respond to each issue you are having with our theme on Github.</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
          <!--轮播图-->
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://fly2you.cn/img/banner_one.jpg" class="d-block w-100" alt="123">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://fly2you.cn/img/header_b2b2c.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://fly2you.cn/img/header_uniapp.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
    
    <div class="carousel-item">
      <img src="https://fly2you.cn/img/header_pnf-bg.jpg" class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>


        
      </section>
      
      
      
      
      <section class="slice pt-0 sct-color-1">
        <div class="container">
          <div class="row justify-content-center align-items-center">
            <div class="col-lg-8 text-center">
              <h3 class="heading h3 font-weight-400">
                I am ready to start a new project with <span class="font-weight-700">Xiaoliunian</span> UI Kit.
              </h3>
            
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="pr-lg-5">
              <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>小流年</strong> UI Kit</h1>
              
              <p>A product developed using Java, similar to CMS. Xiao Lianian's vision is to become the preferred portal for every enterprise, enabling each enterprise to have a secure, easy-to-use, and comfortable portal site, thereby helping them achieve growth and demonstrate value.
              	<br />
              	<p>一个使用 Java 开发，类似 CMS 的产品。 Xiao Liunian 愿景是成为每个企业的门户首选，让每个企业拥有一个安全、易用和舒心的门户站点，从而帮助企业获得增长和体现价值。</p>
              </p>
            </div>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">特征</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">很酷的东西</a></li>
              <li><a class="text-muted" href="#">功能</a></li>
              <li><a class="text-muted" href="#">为开发人员准备的东西</a></li>
   
            </ul>
          </div>
        
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">资源</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">文档</a></li>
              <li><a class="text-muted" href="#">帮助</a></li>
              <li><a class="text-muted" href="#">下载</a></li>
         
            </ul>
          </div>
          <div class="col-6 col-md">
            <h5 class="heading h6 text-uppercase font-weight-700 mb-3">关于</h5>
            <ul class="list-unstyled text-small">
              <li><a class="text-muted" href="#">团队</a></li>
              <li><a class="text-muted" href="#">合作</a></li>
              <li><a class="text-muted" href="#">广告</a></li>
 
            </ul>
          </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2020-2023.小流年  All rights reserved.
          </span>
          
        </div>
      </div>
    </footer>
    
  </body>
</html>
